﻿<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/actu.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<link rel="stylesheet" type="text/css" href="css/caroussel.css">
<title>Iron Paris - Bienvenue</title>
<div class="navbar-wrapper">
	<div class="container">
		<c:if test="${eject != null}">
			<div class="alert alert-warning">
				<strong>Oh no!</strong> La partie est suspendue pour cause d'inactivité
			</div>
		</c:if>
		<div class="navbar navbar-inverse navbar-static-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">Finito Iron Paris</a>
				</div>
				<div
					style="font-size: 20px; color: #4084CA; position: absolute; right: 50px; top: 10px;">
					<li class="Action"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">Bienvenue ${login} <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="deconnexion.html">Déconnexion</a></li>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li class="Action"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Action <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#cree">Créer une partie</a></li>
								<li><a href="#rejoindrePar">Rejoindre</a></li>
								<li><a href="#reprendrePar">Reprendre une partie</a></li>
							</ul></li>
						<li><a href="#propos">À propos</a></li>
					</ul>
				</div>
			</div>
		</div>

	</div>
</div>

<!-- Carousel
    ================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
		<div class="item active">
			<img src="image/accueilParis.jpg" alt="First slide">
			<div class="container">
				<div class="carousel-caption">
					<h1>Finitooo</h1>
					<p>Bienvenue sur votre panneau de contrôle, veuillez choisir
						une des actions disponnibles ci-dessous pour commencer</p>
					<p>
						<a class="btn btn-lg btn-primary" href="#ancre" role="button">Get
							Ready ?</a>
					</p>
				</div>
			</div>
		</div>
		<div class="item">
			<img src="image/accueilParis3.jpg" alt="Second slide">
			<div class="container">
				<div class="carousel-caption">
					<h1>Un Seul But</h1>
					<p>Les joueurs essaient de placer leurs jetons sur leur tableau
						en ordre croissant</p>
					<p>
						<a class="btn btn-lg btn-primary" href="#ancre" role="button">Get
							Ready ?</a>
					</p>
				</div>
			</div>
		</div>
		<div class="item">
			<img src="image/accueilParis2.jpg" alt="Third slide">
			<div class="container">
				<div class="carousel-caption">
					<h1>Placement</h1>
					<p>Le joueur peut choisir lequel de ses trois jetons il veut
						utiliser</p>
					<p>
						<a class="btn btn-lg btn-primary" href="#ancre" role="button">Get
							Ready ?</a>
					</p>
				</div>
			</div>
		</div>
	</div>
	<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
		class="glyphicon glyphicon-chevron-left"></span></a> <a
		class="right carousel-control" href="#myCarousel" data-slide="next"><span
		class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- /.carousel -->


<div class="container marketing">

	<!-- Three columns of text below the carousel -->
	<div class="row" id="ancre">
		<div class="col-md-4">
			<img class="img-circle" src="image/creeTour.jpg"
				alt="Generic placeholder image">
			<h2>Créer</h2>
			<p>Cliquez ici pour créer une partie avec vos amis.</p>
			<p>
				<a class="btn btn-default" href="#cree" role="button">Créer
					&raquo;</a>
			</p>
		</div>
		<!-- /.col-lg-4 -->
		<div class="col-md-4">
			<img class="img-circle" src="image/rejoindreTour.jpg"
				alt="Generic placeholder image">
			<h2>Rejoindre</h2>
			<p>Cliquez ici pour rejoindre une partie déjà crée.</p>
			<p>
				<a class="btn btn-default" href="#rejoindrePar" role="button">Rejoindre
					&raquo;</a>
			</p>
		</div>
		<!-- /.col-lg-4 -->
		<div class="col-md-4">
			<img class="img-circle" src="image/reprendreTour.jpg"
				alt="Generic placeholder image">
			<h2>Reprendre</h2>
			<p>Cliquez ici pour reprendre une partie suspendu.</p>
			<p>
				<a class="btn btn-default" href="#reprendrePar" role="button">Reprendre
					&raquo;</a>
			</p>
		</div>
		<!-- /.col-lg-4 -->
	</div>
	<!-- /.row -->
	<!-- featurette -->
	<hr class="featurette-divider">

	<div id="propos" class="row featurette">
		<div class="col-md-7">
			<h2 class="featurette-heading">
				À propos de nous ? <span class="text-muted">Nous sommes cool
					!</span>
			</h2>
			<p class="lead">Nous avons dévelloppé ce jeu dans le cadre de
				notre cours de l'Institut Paul Lambin. Nous avons donné du meilleur
				de nous, malgré le peu de temps fournit, nous avons réussi ce grand
				défis.</p>
		</div>
		<div class="col-md-5">
			<img class="featurette-image img-responsive"
				src="image/parisCool.jpg" alt="Generic placeholder image">
		</div>
	</div>
	<hr class="featurette-divider">
	<!-- end featurette -->

	<div id="cree" class="jumbotronIns">
		<p style="color: black; font-weight: bold; font-size: 20px;">Entrez
			le nom de la partie que vous désirez créer.</p>
		<br>
		<form action="creationPartie.html" method="post"
			style="font-size: 14px;">
			Nom de partie : <input type="text" name="nompartie"
				style="width: 300px; height: 32px;">
			<button type="submit" class="btn btn-lg btn-primary">Créer
				la partie</button>
		</form>
	</div>

	<div id="rejoindrePar" class="jumbotronIns">
		<p style="color: black; font-weight: bold; font-size: 20px;">Liste
			des parties que vous pouvez rejoindre.</p>
		<br>


		<table border=1
			style="width: 400px; height: 100px; font-size: 18px; text-align: center;">
			<tr style="font-weight: bold">
				<th>Numéro</th>
				<th>Nom de la partie</th>
				<th>Rejoindre</th>
			</tr>
			<c:set var="nbparties" value="1" />
			<c:forEach var="partie" items="${liste}">
				<form action="rejoindrePartie.html" method="post"
					style="font-size: 14px;">
					<tr style="font-size: 16px; text-align: center;">
						<td>${partie.id_partie}</td>
						<td>${partie.nom}</td>
						<td><button type="submit" name="valeurID"
								value="${partie.id_partie}" class="btn btn-default">Rejoindre</button></td>
					</tr>
				</form>
				<c:set var="nbparties" value="${nbparties+1}" />
			</c:forEach>
		</table>
		<br>
		<button type="submit" class="actu btn btn-lg btn-primary">Actualiser</button>

	</div>


	<div id="reprendrePar" class="jumbotronIns">
		<p style="color: black; font-weight: bold; font-size: 20px;">Liste
			des parties que vous pouvez reprendre.</p>
		<br>

		<form action="rejoindrePartieSuspendu" method="post" style="font-size: 14px;">
			<table border=1
				style="width: 400px; height: 100px; font-size: 18px; text-align: center;">
				<tr style="font-weight: bold">
					<th>Numéro</th>
					<th>Nom de la partie</th>
				</tr>
				<c:set var="nbparties" value="1" />
			<c:forEach var="partie" items="${liste2}">
				<form action="rejoindrePartie.html" method="post"
					style="font-size: 14px;">
					<tr style="font-size: 16px; text-align: center;">
						<td>${partie.id_partie}</td>
						<td>${partie.nom}</td>
						<td><button type="submit" name="valeurID"
								value="${partie.id_partie}" class="btn btn-default">Rejoindre</button></td>
					</tr>
				</form>
				<c:set var="nbparties" value="${nbparties+1}" />
			</c:forEach>
			</table>
			<br>
		</form>

		<button type="submit" class="actu btn btn-lg btn-primary">Actualiser</button>
	</div>

	<script src="js/holder.js"></script>